<template>
	<view class="calendar__wrap">
		<!-- <view class="header">
			<view class="current-date">{{currentDate}}</view>
		</view> -->
		<view class="body">
			<view class="weeks">
				<view class="week__item" v-for="week in weeks" :key="week">{{week}}</view>
			</view>
			<view class="day__list">
				<view class="day__item" v-for="(item,index) in dateData" :key="index" @click="clickDay(item.day,item.log_id)">
					<view :class="{current:item.isSignIn, mergencye: item.hasEmergency}">{{item.day}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			checks: { // 有数据日期 例：[{day: 2, hasEmengercy: true},{day: 13, hasEmengercy: false}]
				type: Array,
				default () {
					return []
				}
			},
			currentDay: { // 当前需要月份的其中一个日期 例：'2018,03,15','3019-03-12'
				type: String,
				default () {
					return null
				}
			}
		},
		data() {
			const {
				year,
				month,
				day
			} = this.getDate()
			const dateData = this.getDateData(year, month)
			return {
				year,
				month,
				day,
				dateData,
				weeks: ['日', '一', '二', '三', '四', '五', '六']
			}
		},
		// 		computed: {
		// 			currentDate() {
		// 				return `${this.year}-${this.format(this.month)}`
		// 			}
		// 		},
		watch: {
			checks(val) {
				const {
					year,
					month
				} = this.getDate()
				const dateData = this.getDateData(year, month)
				this.dateData = dateData
			}
		},
		methods: {
			clickDay(day, log_id) { // 父组件 click 事件响应
				// this.$emit('click',`${this.year}-${this.format(this.month)}-${this.format(day)}`)
				let isEmergency = false
				for (let i = 0; i < this.checks.length; i++) {
					if (parseInt(this.checks[i].log_date_day) === day) {
						isEmergency = true
						//返回点击的日期（年-月-日）
						// this.$emit('click', `${this.year}-${this.format(this.month)}-${this.format(day)}`)
						this.$emit('click', {
							date: `${this.year}-${this.format(this.month)}-${this.format(day)}`,
							log_id
						})
					}
				}
				if (!isEmergency) {
					this.$emit('click', {
						date: `${this.year}-${this.format(this.month)}-${this.format(day)}`
					})
				}
			},
			getDate(current = this.currentDay) {
				const date = current ? new Date(current) : new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return {
					year,
					month,
					day
				}
			},
			getDateData(year, month) {
				const date = new Date(`${year}/${month}/1`)
				const firstDayWeek = date.getDay()
				const emptyStrNum = firstDayWeek > 0 ? firstDayWeek : 7
				const data = [...this.getEmptys(emptyStrNum), ...this.getDays()]
				return data
			},
			getEmptys(count) {
				let arr = []
				for (let i = 0; i < count; i++) {
					arr.push({
						day: '',
						isSignIn: false,
						hasEmergency: false
					})
				}
				return arr
			},
			getLastDay() {
				let {
					year,
					month
				} = this.getDate()
				month += 1
				if (month > 11) {
					year += 1
					month = 1
				}
				let firstDayTimeStamp = new Date(`${year}/${month}/1`).getTime()
				let oneDayTimeStamp = 24 * 60 * 60 * 1000
				let lastDay = new Date(firstDayTimeStamp - oneDayTimeStamp).getDate()
				return lastDay
			},
			getDays() {
				const lastDay = this.getLastDay()
				const days = []
				for (let i = 1; i <= lastDay; i++) {
					let date = {
						day: i,
						isSignIn: false,
						hasEmergency: false,
						log_id: ''
					}
					for (let j = 0; j < this.checks.length; j++) {
						if (parseInt(this.checks[j].log_date_day) === i) {
							date.isSignIn = true
							date.hasEmergency = this.checks[j].is_emergency
							date.log_id = this.checks[j].id
						}
					}
					days.push(date)
				}
				return days
			},
			format(num) {
				return num < 10 ? `0${num}` : num
			}
		}
	}
</script>

<style scoped>
	.calendar__wrap {
		background-color: #fff;
		color: #646464;
	}

	.calendar__wrap .header {
		padding: 0 24upx;
	}

	.calendar__wrap .header .current-date {
		text-align: center;
		font-size: 34upx;
		border-bottom: 2upx solid #eee;
		padding: 32upx 0;
	}

	.calendar__wrap .body .weeks {
		display: flex;
		font-size: 30upx;
		padding: 32upx 0;
	}

	.calendar__wrap .body .weeks .week__item {
		flex: 1;
		text-align: center;
	}

	.calendar__wrap .body .day__list {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 20upx;
	}

	.calendar__wrap .body .day__list .day__item {
		display: flex;
		justify-content: center;
		width: 14.285%;
		text-align: center;
		padding: 15upx 0;
		font-size: 34upx;
	}


	.current {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56upx;
		height: 56upx;
		border-radius: 100%;
		padding: 12upx;
		box-sizing: border-box;
		background-color: #3f9dff;
		color: #fff;
		font-size: 28upx;
	}

	.mergencye {
		background-color: red;
	}
</style>
